<template>
  <Container class="mobile-form-modal">
    <div class="mobile-form-modal-inner">
      <div class="title">
        {{
          `${
            isAdd
              ? $t("form.profile_work.add_title")
              : $t("form.profile_work.change_title")
          }`
        }}
      </div>
      <a-form class="form" :model="formState" ref="formRef">
        <a-form-item
          class="form-item"
          :label="$t('form.profile_work.form.item_1.label')"
          name="date_value"
          :rules="[
            {
              required: true,
              message: $t('form.profile_work.form.item_1.rules.error_1'),
              trigger: 'blur',
            },
          ]"
        >
          <a-range-picker
            v-model:value="formState.date_value"
            value-format="YYYY-MM-DD"
            :allowClear="false"
          />
        </a-form-item>
        <a-form-item
          class="form-item"
          :label="$t('form.profile_work.form.item_2.label')"
          name="company_title"
          :rules="[
            {
              required: true,
              message: $t('form.profile_work.form.item_2.rules.error_1'),
              trigger: 'blur',
            },
          ]"
        >
          <a-input
            :maxlength="30"
            v-model:value.trim="formState.company_title"
            :placeholder="$t('form.profile_work.form.item_2.rules.error_1')"
          ></a-input>
        </a-form-item>
        <a-form-item
          class="form-item"
          :label="$t('form.profile_work.form.item_3.label')"
          name="position_name"
          :rules="[
            {
              required: true,
              message: $t('form.profile_work.form.item_3.rules.error_1'),
              trigger: 'blur',
            },
          ]"
        >
          <a-input
            :maxlength="30"
            v-model:value.trim="formState.position_name"
            :placeholder="$t('form.profile_work.form.item_3.rules.error_1')"
          ></a-input>
        </a-form-item>
        <a-form-item
          class="form-item"
          :label="$t('form.profile_work.form.item_4.label')"
          name="industry_name"
          :rules="[
            {
              required: true,
              message: $t('form.profile_work.form.item_4.rules.error_1'),
              trigger: 'blur',
            },
          ]"
        >
          <a-input
            :maxlength="30"
            v-model:value.trim="formState.industry_name"
            :placeholder="$t('form.profile_work.form.item_4.rules.error_1')"
          ></a-input>
        </a-form-item>
        <a-form-item
          class="form-item"
          :label="$t('form.profile_work.form.item_5.label')"
          name="level"
          :rules="[
            {
              required: true,
              message: $t('form.profile_work.form.item_5.rules.error_1'),
              trigger: 'blur',
            },
          ]"
        >
          <a-input
            :maxlength="30"
            v-model:value.trim="formState.level"
            :placeholder="$t('form.profile_work.form.item_5.rules.error_1')"
          ></a-input>
        </a-form-item>
        <a-form-item
          class="form-item"
          :label="$t('form.profile_work.form.item_6.label')"
          name="department_name"
          :rules="[
            {
              required: true,
              message: $t('form.profile_work.form.item_6.rules.error_1'),
              trigger: 'blur',
            },
          ]"
        >
          <a-input
            :maxlength="30"
            v-model:value.trim="formState.department_name"
            :placeholder="$t('form.profile_work.form.item_6.rules.error_1')"
          ></a-input>
        </a-form-item>
        <a-form-item
          class="form-item"
          :label="$t('form.profile_work.form.item_7.label')"
          name="people"
          :rules="[
            {
              required: true,
              message: $t('form.profile_work.form.item_7.rules.error_1'),
              trigger: 'blur',
            },
          ]"
        >
          <a-input-number
            :placeholder="$t('form.profile_work.form.item_7.rules.error_1')"
            :step="100"
            :max="9999"
            :min="0"
            v-model:value.trim="formState.people"
          />
        </a-form-item>
        <a-form-item
          class="form-item editor"
          :class="[formState.job_description ? 'vertical' : '']"
          :label="$t('form.profile_work.form.item_8.label')"
          name="job_description"
          :rules="[
            {
              required: true,
              message: $t('form.profile_work.form.item_8.rules.error_1'),
              trigger: 'blur',
            },
          ]"
        >
          <div class="flex-1" @click="editorVisible = true">
            <div class="raw-html">
              <div class="ql-editor" v-html="formState.job_description"></div>
            </div>
            <span class="editor-text"
              >{{ $t("editor.work") }}
              <IconArrowRight fill="rgba(0, 0, 0, 0.25)" />
            </span>
          </div>
        </a-form-item>
      </a-form>
      <div class="footer-btn">
        <div class="footer-btn-inner">
          <a-button @click="goBack">{{ $t("btnText.cancel") }}</a-button>
          <a-button
            class="ensure-btn"
            :class="formIsValid ? '' : 'disabled'"
            type="primary"
            @click="continuePublish"
            >{{ $t("btnText.save") }}</a-button
          >
        </div>
      </div>
    </div>
  </Container>
  <EditorMobile
    v-model="formState.job_description"
    :placeholder="$t('editor.work')"
    v-model:visible="editorVisible"
  />
</template>

<script setup lang="ts">
import { computed, getCurrentInstance, onMounted, ref } from "vue";
import { message } from "ant-design-vue";
import { useRouter } from "vue-router";
import { useMemberStore } from "../../store";
import type { ExperienceEditParams } from "../../types/profile";
import {
  ExperienceUrl,
  postExperienceCreate,
  postExperienceUpdate,
} from "../../api/profile";

const editorVisible = ref(false);
const $t = getCurrentInstance()?.appContext.config.globalProperties.$t;

const router = useRouter();
const memberStore = useMemberStore();

const isAdd = ref(false);
const initForm = () => {
  let data = JSON.parse(sessionStorage.getItem("params")!);
  isAdd.value = !!!data;
  if (!data) {
    Object.keys(formState.value).forEach((key) => {
      formState.value[key] = "";
    });
  } else {
    formState.value.id = data.id;
    formState.value.date_value = [
      [data.start_year, data.start_month, "01"].join("-"),
      [data.end_year, data.end_month, "01"].join("-"),
    ];
    formState.value.company_title = data.company_title;
    formState.value.position_name = data.position_name;
    formState.value.industry_name = data.industry_name;
    formState.value.job_description = data.job_description;
    formState.value.level = data.level;
    formState.value.people = data.people;
    formState.value.department_name = data.department_name;
  }
};

const formIsValid = computed(() => {
  let flag = true;
  if (!formState.value.date_value) flag = false;
  if (!formState.value.company_title) flag = false;
  if (!formState.value.position_name) flag = false;
  if (!formState.value.industry_name) flag = false;
  if (!formState.value.job_description) flag = false;
  if (!formState.value.level) flag = false;
  if (!formState.value.people) flag = false;
  if (!formState.value.department_name) flag = false;
  return flag;
});

// 发布
const formState = ref<ExperienceEditParams>({
  id: 0,
  start_year: "",
  start_month: "",
  end_year: "",
  end_month: "",
  company_title: "",
  position_name: "",
  industry_name: "",
  job_description: "",
  level: "",
  date_value: [""],
  people: "",
  department_name: "",
});

const resetDateValue = () => {
  formState.value.start_year = formState.value.date_value[0].split("-")[0];
  formState.value.end_year = formState.value.date_value[1].split("-")[0];
  formState.value.start_month = formState.value.date_value[0].split("-")[1];
  formState.value.end_month = formState.value.date_value[1].split("-")[1];
};
const formRef = ref();

const continuePublish = () => {
  if (!formIsValid.value) return;
  formRef.value.validate().then(async () => {
    let lang = sessionStorage.getItem("m_lang")!;
    resetDateValue();
    if (isAdd.value) {
      let res = await postExperienceCreate(ExperienceUrl.workCreate, {
        ...formState.value,
        lang,
      });
      if (res.code === 200) {
        message.success($t("message.success.add"));
      } else {
        message.error($t("message.error.add"));
      }
    } else {
      let res = await postExperienceUpdate(ExperienceUrl.workUpdate, {
        ...formState.value,
        lang,
      });
      if (res.code === 200) {
        message.success($t("message.success.update"));
      } else {
        message.error($t("message.error.update"));
      }
    }
    goBack();
  });
};
const goBack = () => {
  sessionStorage.removeItem("params");
  sessionStorage.removeItem("m_lang");
  router.go(-1);
};

onMounted(() => {
  initForm();
});
</script>
<style lang="less">
.mobile-form-modal {
  .wrap-container > .wrap-pl {
    padding-bottom: 0 !important;
  }
}
</style>
<style scoped lang="less">
@import url("./common.less");

:deep(.form) {
  .form-item {
    .ant-row {
      width: 100%;
      flex-wrap: nowrap;
      justify-content: space-between;
      .ant-col {
        flex: 0 0 auto;
        .ant-input-number {
          border: 1px solid transparent !important;
          box-shadow: 0 0 0 transparent !important;
          input {
            text-align: right;
          }
        }
      }
    }
  }
}
</style>
